/*
 * @Author: nengwu 409791297@qq.com
 * @Date: 2020-06-30 11:16:30
 * @LastEditors: mylesshie@gmail.com
 * @LastEditTime: 2020-08-04 16:43:26
 * @description:
 */

import React, { useState } from 'react'
import { View, Image } from 'react-native'
import { SearchBar } from 'react-native-elements'
import AntDesign from 'react-native-vector-icons/AntDesign'

import styles from './styles'
const logo = require('@/assets/images/header-logo.png')

const HomeHeader = props => {
  const [value, setValue] = useState('')

  const _changeText = text => {
    setValue(text)
  }

  const _submitText = () => {
    if (!value) return
    props.doSearch && props.doSearch(value)
    setValue('')
    console.log(value)
  }

  return (
    <View style={styles.wrap}>
      <View style={styles.main}>
        <View style={styles.left}>
          <Image source={logo} style={styles.logo} />
        </View>
        <View style={styles.right}>
          <SearchBar
            value={value}
            onChangeText={(text) => _changeText(text)}
            containerStyle={styles.searchContainer}
            inputContainerStyle={styles.inputContainer}
            inputStyle={styles.inputStyle}
            leftIconContainerStyle={styles.iconStyle}
            searchIcon={<AntDesign name="search1" color="white" size={20} />}
            placeholderTextColor="#fff"
            placeholder="搜一搜"
            onSubmitEditing={_submitText}
          />
        </View>
      </View>
    </View>
  )
}

export default HomeHeader
